<!DOCTYPE html>
<html>
	<head>
		<title>添加/修改</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		<link rel="stylesheet" href="./sa-plus-sa.css">
		<script src="../../static/vue.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/router.js"></script>
		<style type="text/css">
			.c-panel .el-form .c-label{width: 7em !important;}
			.c-panel .el-form .el-input, .c-panel .el-form .el-textarea__inner{width: 250px;}
			/*  普通文本和富文本一起变长  */
			.c-panel .el-form .el-input, .c-panel .el-form .el-textarea__inner{width: 700px;}
			.c-item-mline{width: 800px;}
			.el-table__body-wrapper{min-height: 0px;}
			
			/* .c-item .image-box{padding-bottom: -20px;} */
			.el-select__tags-text{color: #1890FF; }
			.sk-fox{border: 1px #eee solid; padding: 5px 14px; margin-top: 8px;}
			.sk-name{font-weight: bold;}
			/* 规格值 */
			.sku-box .el-tag{border-radius: 1px; margin-right: 5px;}
			/* .sku-box .el-input-group__append{padding: 0 10px;} */
			.sku-box .el-input-group__prepend,.sku-box .el-input-group__append{padding: 0 10px; border-radius: 1px !important; color: #666;}
			.not-values-tips{color: #aaa; margin-right: 14px;}
			.del-r{margin-left: 10px; }
			.sv-name{/* white-space: nowrap; *//* word-break:keep-all; */ }
			.svgao{color: #409EFF; font-weight: bold;}
			.small-input{width: 85px !important;}
		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<!-- 参数栏 -->
			<div class="s-body">
				<div class="c-panel">
				<div class="c-title">添加/修改</div>
				<el-form v-if="m">
					<div class="c-item br">
						<label class="c-label">优惠券名称：</label>
						<el-input size="medium" v-model="m.name"></el-input>
					</div>
					<div class="c-item br">
						<label class="c-label">活动时间：</label>
						<el-date-picker v-model="m.time_range" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
						</el-date-picker>
					</div>
					<div class="c-item br">
						<label class="c-label">可用/停用：</label>
						<el-select size="medium" v-model="m.is_active">
							<el-option label="可用" :value="1"></el-option>
							<el-option label="停用" :value="0"></el-option>
						</el-select>
					</div>
					<div class="c-item br">
						<label class="c-label">制券数量：</label>
						<el-input size="medium" v-model="m.total_num"></el-input>
					</div>
					<div class="c-item br">
						<label class="c-label">消费金额：</label>
						<el-input size="medium" v-model="m.amount" placeholder="需满足的金额"></el-input>
					</div>
					<div class="c-item br">
						<label class="c-label">优惠金额：</label>
						<el-input size="medium" v-model="m.discount" placeholder="可优惠金额"></el-input>
					</div>
					<div class="c-item br">
						<label class="c-label">使用说明：</label>
						<el-input size="medium" placeholder="使用说明" v-model="m.intro" style="width: 85%;"></el-input>
					</div>
					<div class="c-item br">
						<label class="c-label">客户设置：</label>
						<el-radio-group v-model="m.customer_type">
							<el-radio label="ALL">全部</el-radio>
							<el-radio label="GROUP">客户群组</el-radio>
							<el-radio label="LEVEL">客户等级</el-radio>
							<el-radio label="CUSTOMER">指定客户</el-radio>
						</el-radio-group>
					</div>
					<div class="c-item br">
						<label class="c-label">商品设置：</label>
						<el-radio-group v-model="m.goods_type">
							<el-radio label="ALL">全部</el-radio>
							<el-radio label="GROUP">商品分组</el-radio>
							<el-radio label="LEVEL">商品品牌</el-radio>
							<el-radio label="CUSTOMER">指定商品</el-radio>
						</el-radio-group>
					</div>
					<div class="c-item br" style="width:600px;">
						<label class="c-label" style="float:left;">用户端：</label>
						<el-checkbox-group v-model="m.platform" style="width: 200px;float:left;">
							<el-checkbox label="H5">H5端</el-checkbox>
							<el-checkbox label="PC">PC端</el-checkbox>
						</el-checkbox-group>
					</div>
				</el-form>
				</div>
			</div>
			<!--  底部按钮  -->
			<div class="s-foot" style="display: block;">
				<el-button size="mini" type="primary" @click="ok()">确定</el-button>
				<el-button size="mini" type="info" @click="cancel()">取消</el-button>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '.vue-box',
				data: {
					id: sa.p('id', 0),
					m: {},
				},
				methods: {
					// 创建一个 默认Model 
					createModel: function() {
						return {
							is_active: 1,
							coupon_type: 'ISSUE',
							customer_type: 'ALL',
							goods_type: 'ALL',
							platform: ["H5", "PC"],
							coupon_id: 0,
							time_range: [],
						};
					},
					// ok
					ok: function() {
						this.m.created_at = undefined;
						this.m.updated_at = undefined;
						if(this.submitCheck() != 'ok') {
							return;
						}
						sa.ajax(router.updateCoupon, this.m, function(res){
							sa.alert('操作成功', function(res) {
								sa_admin.closeTabById(90007);
							}.bind(this)); 
						}.bind(this));
					},
					// 表单验证
					submitCheck: function() {
						try{
							var m = this.m; // 获取 m对象
							sa.checkNull(m.name, '请输入优惠券名称');
							sa.check(m.time_range.length != 2, '请选择活动时间段');
							sa.checkNull(m.total_num, '请输入制券数量');
							sa.checkNull(m.coupon_type, '请输入优惠券类型');
							sa.checkNull(m.amount, '请输入消费金额');
							sa.checkNull(m.discount, '请输入折扣金额');
							sa.checkNull(m.intro, '请输入使用说明');
							sa.check(m.platform.length == 0, '请选择客户端');
							return 'ok'; // 全部通过验证，返回ok 表示正确
						} catch(e) {
							sa.error(e);
						}
					},
					cancel: function(){
						sa.confirm('修改的信息不会被保存，确认关闭？', function(){
							sa_admin.closeTabById(90007);
						});
					}
				},
				mounted: function(){
					if(this.id <= 0) {
						this.m = this.createModel();
					} else {
						sa.ajax(router.getCoupon, {coupon_id: this.id}, function(res) {
							this.m = res;
							this.$set(this.m, 'time_range', [new Date(res.start_at), new Date(res.end_at)]);
						}.bind(this), {type: 'get'});
					}
				}
			})
		</script>
	</body>
</html>